<template>
	<view>
		<view class="bg_1"></view>
		<view class="home_top flex_row_center_center"  :style="{ top: 'calc(' + statusBarHeight + ' + 20rpx)' }">
			  <view style="margin-right: 10rpx;">{{nowYear}} 年  </view>
			  <view>{{nowMonth.toString().padStart(2, '0')}} 月</view>
		</view>
		<view class="module"  :style="{ 'padding-top': 'calc(' + statusBarHeight + ' + 120rpx)' }">
		   <view class="module-top">
			   <view class="day day_title_list">
			     <view class="day-item" v-for="(item,index) in ['日','一','二','三','四','五','六']" :key="index">
			         {{item}}
			     </view>
			   </view>
			   <swiper class="swiper" :current="current" :circular="true" style="height: 300px;" :duration="100" @change="canclerChange" >
				  <swiper-item v-for="(item,index) in monthList"
					  	:key="index">
					  <view class="days">
					  		<view
							    class="days_item "
								:class="$checkcalendar(item)==5 ? 'days_item_height_1':'days_item_height_2'"
								v-for="(item2,index2) in item" 
								:key="index2"
								@click="dayClick(item2,index2)"  > 
								<view  :class="(item2.fromMonth=='nowMonth'&& item2.day==choose_day) ? 'nowDate':''" >
									<view   :style="item2.fromMonth=='nowMonth'?'':'color:#c8c9cc;'">{{item2.day}}  </view>
									<view :style="item2.fromMonth=='nowMonth'?'':'color:#c8c9cc;'">
										<view :class="(item2.fromMonth=='nowMonth'&& item2.day==choose_day) ? 'current_special_jieri':'special_jieri'" v-if="item2.solarJieri || item2.lunarJieri || item2.lunarJieqi">{{item2.solarJieri || item2.lunarJieri || item2.lunarJieqi}}</view>
										<view v-else >{{item2.lunar}}</view>
									</view>
								</view>
						</view>
					</view>
				  </swiper-item>
			   	</swiper>
		   </view>
		  
		  <view class="module-bottom">
			  <view class="module-bottom_top ">
				  <image class="module-bottom_top_image" src="@/static/images/other/lunarbg.jpg" mode="aspectFill"></image>
				  <view class="module-bottom_1 flex_row_between_center">
					  <view class="module-bottom_1_left" @click="natTo">
						  <view>{{lunarInfo.lunarDay}}</view>
						  <view>农历{{lunarInfo.lunarMonth}}月</view>
					  </view>
					  <view class="module-bottom_1_right">
						  <view>{{lunarInfo.lunarYear}}</view>
						  <view>星期{{currentWeek}}</view>
					  </view>
				  </view>
				
			  </view>
			  <view class="module-bottom_bottom">
				  <view class="flex_row_start_center">
					 <view class="con1 module-bottom_bottom_icon flex_row_center_center ">宜</view>
					 <view class="flex_row_start_center module-bottom_bottom_label ">
						 <view class="label_item" v-for="(item,index) in yi" :key="index">{{item}}</view>
					 </view>
				  </view>
				  <view class="flex_row_start_center" style="margin-top: 15rpx;">
					 <view class="con2 module-bottom_bottom_icon flex_row_center_center ">忌</view>
					<view class="flex_row_start_center module-bottom_bottom_label">
						 <view class="label_item" v-for="(item,index) in ji" :key="index">{{item}}</view>
					</view>
				  </view>
			  </view>
		  </view>
		  
		
		</view>
	</view>
</template>
 
<script>
import {Solar,SolarMonth,Lunar,HolidayUtil}from'@/pages/common/lunar.js';
import {sloarToLunar,getYearMonthDay,getDayGanzhi } from '@/utils/lunar.js'
export default {
  name: 'LunarCalendar',
  data() {
    return {
          nowYear:new Date().getFullYear(),//获取年份
		  nowMonth:new Date().getMonth()+1,//获取月份
		  nowDay:new Date().getDate(),
		  monthList:[],
		  dayLeft: 0,
		  startLeft: 0,
		  statusBarHeight:getApp().globalData.statusBarHeight+'px',
		  choose_day:'',
		  lunarInfo:'',//展示当天或者选中的那天农历信息
		  currentWeek:'',//展示当天或者选中的那天是星期几
		  yi:'',//宜
		  ji:'',//忌
		  current:1,
		  //用于存放未改变前的下标
		 primary_current:1,
    };
  },
  mounted() {
  },
  computed: {
    
  },
  created(){
	  this.getThreeMonth()
	  this.choose_day=this.nowDay
	  this.getLunar()
	 
  },
  methods: {
	   natTo(){
		  this.$tab.navigateTo('/pages/weather/almanac')
	   },
	   //获取当天的农历和当天星期几以及宜忌
	   getLunar(){
		  let lunarInfo=sloarToLunar(this.nowYear, this.nowMonth.toString().padStart(2, '0'),  this.choose_day)
		  this.lunarInfo=lunarInfo
		  this.currentWeek = Solar.fromDate(new Date(this.nowYear+'/'+this.nowMonth+'/'+this.choose_day)).getWeekInChinese();
	      var d = Lunar.fromDate(new Date(this.nowYear+'/'+this.nowMonth+'/'+this.choose_day))
		  //宜
		  this.yi=d.getDayYi();
		  //忌
		  this.ji=d.getDayJi();
	   },
	   dayClick(item2,index){
		   console.log(item2);
		   console.log(index);
		   if(item2.fromMonth=='lastMonth'){
			   return false
		   }
		   if(item2.fromMonth=='nextMonth'){
		   	  return false
		   }
		   this.choose_day=item2.day
		   this.getLunar()
	   },
	    canclerChange(e){
			console.log(e);
		    var primaryCurrent = this.current
			var currentindex = e.detail.current;
			if(primaryCurrent - currentindex == -1 || primaryCurrent - currentindex == 2){
				//左滑 下个月
				if (this.nowMonth==12){
				  this.nowYear=parseInt(this.nowYear)+1;
				  this.nowMonth=1;
				  
				}else{
					this.nowMonth=parseInt(this.nowMonth)+1;
				}
				
				
			}else{
				//右滑
					if (this.nowMonth==1){
						  this.nowYear=parseInt(this.nowYear)-1;
						  this.nowMonth=12;

					}else{
						this.nowMonth=parseInt(this.nowMonth)-1;
					}
			}
			
			if(currentindex==0){
				this.monthList[0]=this.getCalendar(this.nowYear,this.nowMonth)
				this.monthList[1]=this.getCalendar(this.nowYear,this.nowMonth+1)
				this.monthList[2]=this.getCalendar(this.nowYear,this.nowMonth+(-1))
			}else if(currentindex==1){
				this.monthList[0]=this.getCalendar(this.nowYear,this.nowMonth+(-1))
				this.monthList[1]=this.getCalendar(this.nowYear,this.nowMonth)
				this.monthList[2]=this.getCalendar(this.nowYear,this.nowMonth+1)
			}else if(currentindex==2){
				this.monthList[0]=this.getCalendar(this.nowYear,this.nowMonth+1)
				this.monthList[1]=this.getCalendar(this.nowYear,this.nowMonth+(-1))
				this.monthList[2]=this.getCalendar(this.nowYear,this.nowMonth)
			}
			if(this.nowMonth==new Date().getMonth()+1){
				this.choose_day=new Date().getDate()
			}else{
				this.choose_day=1
			}
			this.current=currentindex
			this.getLunar()
		
	    },
		
		
	   
      // 获取三月日期
		getThreeMonth(){
			let year,month
			this.monthList = []
			
			// 获取上一月日历
			if (this.nowMonth==1){
				year = parseInt(this.nowYear)-1;
				month = 12
			}else{
				year = this.nowYear
				month = parseInt(this.nowMonth)-1;
			}
			this.monthList.push(this.getCalendar(year,month))
		
			this.monthList.push(this.getCalendar(this.nowYear,this.nowMonth))
			
			// 获取下一月日历
			if (this.nowMonth==12){
				year = parseInt(this.nowYear)+1;
				month = 1
			}else{
				year = this.nowYear
				month = parseInt(this.nowMonth)+1;
			}
			this.monthList.push(this.getCalendar(year,month))
			console.log('this.monthList',this.monthList);
			
			
		},
		
	  /*闰年 时间判断*/
		isLeap(year) {
			return year % 4 == 0 ? (year % 100 != 0 ? 1 : (year % 400 == 0 ? 1 : 0)) : 0;
		},
		 //获取某月日期
		getCalendar(Year,Month){
			console.log(Year,Month);
			//每个月的天数
			var days_per_month = new Array(31, 28 + this.isLeap(Year), 31, 30, 31, 30, 31, 31, 30, 31, 30, 31); 
			var dateList = []; 
			
			//获取本月的一号是星期几 0星期天
			var s=new Date(Year + '/' + Month + '/' + '01').getDay();
			//上月月份
			var lastMonth = Month==1? 12: Month-1
			//上个月年份
			var lastYear = Month==1? Year-1: Year
			
			// 上月天数
			var lastMonthDay = days_per_month[lastMonth - 1]
			// 补上 上月日期
			for(var i = s-1; i >= 0; i--) {
					var day = parseInt(lastMonthDay)-i;
					dateList.push({
						 day,
						 fromMonth: 'lastMonth',
						 lunar:getYearMonthDay(lastYear, lastMonth.toString().padStart(2, '0'),  day),
						 className: ''
					})//获取上月末尾天数  补齐本月日历显示
			 }
			 
			 
			// 当月天数
			var nowMonthDay = days_per_month[Month - 1]
			
			// 添加当月日期
			for(var j = 0; j < nowMonthDay; j++) {
				let jieri =Solar.fromYmd(Year, Month, j+1)
				//获取农历对象  阳历转农历
				let lunarday=Lunar.fromDate(new Date(Year+'/'+Month+'/'+(j+1)));
				// 获取传统节日
				let traditionalJieri =Lunar.fromYmd(lunarday.getYear(),lunarday.getMonth(),lunarday.getDay() );
				
				dateList.push({
					day: j+1,
					fromMonth: 'nowMonth',
					solarJieri:jieri.getFestivals()[0] || '',
					lunarJieri: traditionalJieri.getFestivals()[0] || '',
					lunarJieqi:traditionalJieri.getJieQi(),
					lunar:  getYearMonthDay(Year, Month.toString().padStart(2, '0'), j+1),
					className: ''
				})
			}
			// console.log('dateList',dateList);
			
			//获取本月最后一天是星期几 0星期天
			var l =new Date(Year + '/' + Month + '/' + nowMonthDay).getDay();
			
			//下个月年份
			var  futureYear = Month==12? Year+1: Year
			//下月月月份
			var  futureMonth = Month==12? 1: Month+1
			
			if(l < 6){
				// 补上 下月日期
				for(var i = 1; i <= 6-l; i++) {
						
						dateList.push({
							 day: i,
							 fromMonth: 'nextMonth',
							 lunar:getYearMonthDay(futureYear, futureMonth.toString().padStart(2, '0'), i),
							 className: ''
						})
				 }
			}
			return dateList
		},
   
  }
};
</script>
 
<style lang="scss" scoped >
.bg_1 {
		position: fixed;
		top: 0;
		left: 0;
		width: 750rpx;
		height: 150rpx;
		z-index: 0;
		right: 0;
		margin: 0 auto;
		background:#fff;
	}
	.home_top{
		position: fixed;
		left: 0;
		padding: 10rpx 35rpx;
		z-index: 99;
		width: 750rpx;
		height: 88rpx;
		font-size: 32rpx;
		background-color: #fff;
		color: #000;
		border-bottom: 2rpx solid #cecece;
		
	}
.module{
	.module-top{
		background-color: #fff;
		padding-bottom: 30rpx;
		padding-top: 10rpx;
	}
        .threeMonth{
            display: flex;
            width: 100%;
        }
        
        .title{
            font-size: 35rpx;
            font-weight: bold;
            padding-bottom: 30rpx;
        }
        
        .day{
            display: flex;
            position: relative;
            width: 100%;
            justify-content: space-around;
            flex-wrap: wrap;
            text-align: center;
            align-content: flex-start;
            
            .active{
                background-color: #1972F0;
                color: #fff;
            }
        }
		.day_title_list{
			padding: 22rpx 0 ;
			border-bottom: 2rpx solid #dadada;
		}

        
        .day-item{
            width: 14%;
			.day_item_info{
				width: 100%;
				font-size: 32rpx;
				// padding-top: calc(50% - 1em);
				// padding-bottom: calc(50% - 1em);
				& view:last-child{
					font-size: 20rpx;
				}
			}
        } 
		.choose_day{
			background-color: #9b4c3a;
		}
		
      .module-bottom{
		  margin-top: 20rpx;
		  background-color: #fff;
		  padding: 15rpx;
		  
		 .module-bottom_top{
			 position: relative;
			.module-bottom_top_image{
				width: 720rpx;
				height: 180rpx;
			}
			.module-bottom_1{
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
				padding: 0 100rpx;
				
				.module-bottom_1_left{
					text-align: center;
					color: #9b4c3a;
					& view:first-child{
						font-size: 40rpx;
					}
					& view:last-child{
						font-size: 28rpx;
						margin-top: 8rpx;
					}
				}
				
				.module-bottom_1_right{
					text-align: center;
					color: #9b4c3a;
					& view:first-child{
						font-size: 34rpx;
					}
					& view:last-child{
						font-size: 28rpx;
						margin-top: 8rpx;
					}
				}
			}
		 }
		  
		  .module-bottom_bottom{
			  padding: 20rpx 30rpx;
			  font-size: 28rpx;
			  color: #a1a1a1;
			  .con1{
				  background-color: #93a2ff;
			  }
			  .con2{
			  	  background-color: #dad8bd;
			  }
			  .module-bottom_bottom_icon{
				 color: #fff;
				 width: 50rpx;
				 height: 50rpx;
				 border-radius: 50%;
				 margin-right: 24rpx;
			  }
			  .module-bottom_bottom_label{
				  width: 616rpx;
				  flex-wrap: wrap;
			  }
			  .label_item{
				  margin-right: 12rpx;
				  
				  &:last-child{
					  margin-right: 0;
				  }
			  }
		  }
		
	  }
}
.nowDate{
	background-color: #93a2ff;
	color: #fff;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	border-radius: 20rpx;
}
.special_jieri{
	color:  #9b4c3a;
	display: -webkit-box; /* 使用WebKit的弹性盒模型 */
	  -webkit-line-clamp: 1; /* 限制显示的文本行数 */
	  -webkit-box-orient: vertical; /* 设置盒模型的方向为垂直 */
	  overflow: hidden; /* 隐藏超出容器的部分 */
	  text-overflow: ellipsis; /* 显示省略号 */
}
.current_special_jieri{
	color: #fff;
	display: -webkit-box; /* 使用WebKit的弹性盒模型 */
	  -webkit-line-clamp: 1; /* 限制显示的文本行数 */
	  -webkit-box-orient: vertical; /* 设置盒模型的方向为垂直 */
	  overflow: hidden; /* 隐藏超出容器的部分 */
	  text-overflow: ellipsis; /* 显示省略号 */
	
}


.days{
	display: flex;
	position: relative;
	width: 750rpx;
	justify-content: space-around;
	flex-wrap: wrap;
	text-align: center;
	align-content: flex-start;
	
	.days_item{
		 width: 14%;
		 display: flex;
		 flex-direction: column;
         justify-content: center;
	}
	.days_item_height_1{
		height: 60px;
	}
	.days_item_height_2{
		height: 50px;
	}
}


</style>